<template>
  <div>
    <div class="title font14 ma30-15">
      <p>我的活动</p>
    </div>
    <div class="pa15 bor7 group">
      <!-- 搜索+新增 -->
      <div class="search clearfix">
        <div class="search-box">
          <form action="">
            <input v-model="keyword" placeholder="输入您要查询的信息" />
            <el-button type="primary" class="primary1" @click="defaultSearch()"
              >搜索</el-button
            >
          </form>
          <router-link to="/release" class="primary1">新增</router-link>
        </div>
      </div>
      <!-- 内容 -->
      <div class="table-responsive">
        <table class="table">
          <tbody>
            <tr>
              <th>活动海报</th>
              <th>活动名称</th>
              <th>省市区</th>
              <th>浏览量</th>
              <th>已报名</th>
              <th>费用</th>
              <th>活动时间</th>
              <th>发布时间</th>
              <th>活动状态</th>
              <th>操作</th>
            </tr>
            <tr v-for="item in this.defaultList" :key="item.id">
              <td>
                <img :src="$api + item.image" class="height_2"  alt />
              </td>
              <td>{{ item.title | contentText }}</td>
              <td>{{ item.city }}</td>
              <td>{{ item.views }}</td>
              <td>{{ item.join_num }}</td>
              <td>￥{{ item.money }}</td>
              <td>{{ item.start_datetime | formatDate }}</td>
              <td>{{ item.create_time | formatDate }}</td>
              <td>
                <span v-if="item.status == 1"
                >进行中</span
                >
                <span v-if="item.status == 2" style="color: #de5044"
                  >已结束</span
                >
                <span class="free" v-if="item.status == 3">已取消</span>
                <el-button type="text" v-if="item.status == 0"
                  >还未开始</el-button
                >
              </td>
              <td>

                <!--router-link :to="{path:'/hotshow',query:{id:item.id}}" target="_blank" class="primary">详情</router-link-->
                 <router-link
                  :to="{ path: '/activedetail', query: { id: item.id } }"
                  class="primary  "
                  >详情</router-link
                >
                <router-link
                  :to="{ path: '/release_edit', query: { id: item.id } }"
                  class="primary color_green"
                  >修改</router-link
                >

                <el-popover placement="top" width="200" trigger="click"
                            :ref="'popovert-' + item.id"
                >
                  <p>取消当前活动</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="channelDefault(item.id)"
                    >确定</el-button
                    >
                    <el-button
                      size="mini"
                      class="quxiao"
                      type="text"
                      @click="pCancelt(item.id)"
                    >取消</el-button
                    >
                  </div>
                  <el-button slot="reference" type="warning" class="quxiao">取消</el-button>
                </el-popover>

                <el-popover placement="top" width="200" trigger="click"
                            :ref="'popover-' + item.id"
                >
                  <p>删除当前活动</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="deleteDefault(item.id)"
                      >确定</el-button
                    >
                    <el-button
                      size="mini"
                      class="quxiao"
                      type="text"
                      @click="pCancel(item.id)"
                      >取消</el-button
                    >
                  </div>
                  <el-button slot="reference"  type="danger" class="shanchu" >删除</el-button>

                </el-popover>
 <router-link :to="{ path: '/activeinformation', query: { id: item.id } }"   class="xiaoxi"
                >消息</router-link >
                <!-- <el-button type="info" plain>消息</el-button> -->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 分页 -->
      <div class="block ta">
        <el-pagination
          layout="  prev, pager, next "
          :page-size="page_size"
          @current-change="current_change"
          :current-page.sync="currentPage"
          :pager-count="5"
          :total="info.total"
          v-if="info.pages > 1"
        >
        </el-pagination>
        <el-empty description="暂无数据" v-if="info.total == 0"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "../../assets/data.js";
export default {
  // 时间戳
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  data() {
    return {
      isActive: 1,
      defaultList: [],
      info: [], //数据
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      sort: "id",
      keyword: "",
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
    };
  },
  mounted() {
    this.getAllList();
  },
  methods: {
    pCancel(id) {
      this.$refs[`popover-`+id][0].doClose()
    },
    pCancelt(id) {
      this.$refs[`popovert-`+id][0].doClose()
    },
    getAllList() {
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/my/myactivity?page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size +
            "&sort=" +
            that.sort +
            "&order=desc&search=title:" +
            that.keyword +
            ";type:;"
        )
        .then(function (response) {
          that.defaultList = response.data.data.data;
          that.info = response.data.data.page;
          ////console.log(that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    deleteDefault(id) {
      //console.log(id);
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/del?id=" + id)
        .then(function (response) {
          //that.defaultList = response.data.data.data;
          if (response.data.code == 1) {
            that.$message({
              message: response.data.msg,
              type: "success",
            });
            that.getAllList();
          } else {
            that.$message.error(response.data.msg);
          }
          //console.log(response.data);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    channelDefault(id) {
      var that = this;
      this.$axios
        .get(this.$api + "//api/activity/cancel?id=" + id)
        .then(function (response) {
          //that.defaultList = response.data.data.data;
          if (response.data.code == 1) {
            that.$message({
              message: response.data.msg,
              type: "success",
            });
            that.getAllList();
          } else {
            that.$message.error(response.data.msg);
          }
          //console.log(response.data);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getAllList();
    },
    defaultSearch() {
      if (!this.keyword) {
        this.$message.error("请输入关键词");
        return false;
      }
      ////console.log(this.keyword);
      this.getAllList();
    },
  },
};
</script>

<style scoped>
.color_green {
  background: #19A15F !important;
  border-color: #19A15F !important;
}
.color_green:hover {
  background: transparent !important;
  color: #19A15F !important;
}
.color_gray {
  background: #f6f5f5 !important;
  border-color: #F6F5F5 !important;
  color: #333 !important;
}
.color_gray:hover {
  background: transparent !important;
}

.quxiao {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
</style>
<style scoped>
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.table th {
  border-top: none;
  background: #f6f5f5;
  font-size: 0.875rem;
  color: #545556;
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
table tr td {
  line-height: 3.4375rem !important;
  text-align: center;
  font-size: 0.875rem;
}
.el-button--info {
  border-radius: 0.25rem;
  background: #f6f5f5;
  border: 1px solid #f6f5f5;
  color: #545556;
}
.table-responsive .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.table > tbody > tr > td {
  border-top: 1px solid #f6f5f5;
}
.el-button + .el-button {
  margin-left: 0.25rem;
}
.el-button--success {
  background: #19a15f;
}
.el-radio {
  margin-right: 0.5rem;
}
.el-radio__label {
  font-size: 0.875rem;
  padding-left: 0.3125rem;
}
tr .free {
  color: #de5044;
}
.table tr img {
  width: 3.4375rem;
  object-fit: cover;height: 2rem;
}
.el-button--danger {
  background: #de5044;
  border-color: #de5044;
}
.search-box {
  float: right;
}
.search .search-box form {
  float: left;
  border-radius: 4px;
  position: relative;
  width: 26.375rem;
  /* line-height: 2.5rem; */
}
.search .search-box form input {
  border: none;
  height: 100%;
  width: 100%;
  float: left;
  height: 2.5rem;
  border-radius: 4px;
  padding-left: 0.9375rem;
  border: 1px solid #d8d8d8;
}
.search .search-box form input::-webkit-input-placeholder {
  color: rgba(84, 85, 86, 0.44);
}
.search .search-box form button {
  float: right;
}
.primary1 {
  top: 0;
}
.primary1:hover {
  background: #fff !important;
  color: #4285f4 !important;
}
.search .search-box .el-button {
  padding: 0.75rem 2rem;
  position: absolute;
  top: 0;
  right: 0;
}
.search .search-box > button {
  float: left;
  position: relative;
  top: 1px;
  margin-left: 0.9375rem;
}
.search {
  margin-bottom: 1.25rem;
}

@media (max-width: 767px) {
 .search .search-box form {
   width: calc(100% - 70px - 2%);
   margin-right: 2%;
 }
 .search-box {
   width: 100%;
 }
 .search .search-box .el-button,.primary1 {
   width: 70px;
   padding-left: 0;
   padding-right: 0;
   text-align: center;
 }
}
</style>
